<template>
  <view class="list-container">
    <uni-datetime-picker v-model="range" type="daterange" @change="maskClick">
        <view v-if="range.length<1" class="time">
          请选择日期
        </view>
        <view v-else class="time">
          <view class="time-btn">{{range[0]}}</view>
          <view>~</view>
          <view class="time-btn">{{range[1]}}</view>
        </view>
      </uni-datetime-picker>
      <uv-empty v-if="isNotEmpty" mode="list" :icon="empty" width="220"></uv-empty>
      <uv-cell-group v-else>
        <uv-cell
          :title="`区间用户统计：${data}`"
          clickable
        >
        </uv-cell>
      </uv-cell-group>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  // import { channelUserCount } from '@/api/setting'
  import empty from '@/static/empty.png'
  import { getCurrentInstance } from 'vue'

	const { appContext } = getCurrentInstance()
	const REQUEST = appContext.config.globalProperties.$http

  const props = defineProps({
    pid: {
      type: String,
      default: undefined
    },
    type: {
      type: String,
      default: 'month'
    }
  })

  const data = ref(undefined)
  const range = ref([])
  const loading = ref(false)
  const isNotEmpty = ref(true)
  const getChannelUserCount = () => {
      loading.value = true
      const params = {
          page: 1,
          pid: props.pid,
          type: 'range',
          start: range.value[0],
          end: range.value[1]
      }
      REQUEST.http("masterchannel/index/channelUserCount", params, "POST").then(res=>{
        data.value = res.data
        loading.value = false
        isNotEmpty.value = false
      })
  }
  const maskClick = (e) => {
    range.value = e
    getChannelUserCount()
  }
</script>

<style lang="scss" scoped>
  .list-container {
    height: calc(100% - 44px - 61px);
    overflow: scroll;
  }
  .time{
    color: #fff;
    border-radius: 3px;
    background-color: #3c9cff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    height: 30px;
    &-btn{
      min-width: 30px;
      padding: 0 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
